<template>
  <view class="login-page">
    <!-- <image class="login-img" src="../../static/img/login-bg.png" mode="widthFix"></image> -->
    <image class="login-img" src="../../static/img/login-bj3.png" mode="widthFix"></image>
    <!-- :style="'height:'+screenHeight+'px !important;'" -->

    <!-- <view class="login-pages-box"> -->
    <!-- <view class="login-page-top"></view> -->
    <view class="login-page-main">
      <view class="_main-tab-box">
        <view
          class="_main-tab-btn"
          :class="loginType == 1 ? '_main-tab-btn-active' : ''"
          @tap="handleLoginType(1)"
          ><text class="_btn-text">手机验证码登录</text></view
        >
        <view
          class="_main-tab-btn"
          :class="loginType == 2 ? '_main-tab-btn-active' : ''"
          @tap="handleLoginType(2)"
          ><text class="_btn-text">帐号登录</text></view
        >
      </view>

      <view class="_main-content tab-botton">
        <view class="_main-content-chunk" v-if="loginType == 1">
          <view class="_content-item">
            <picker
              class="_main-item-val-input"
              @change="handlePicker"
              :value="isIndex"
              :range="isArr"
            >
              <view class="uni-input _main-item-val-input-text">
                {{ isArr[isIndex] }}
                <image class="drop-dowm-img" src="../../static/img/drop-down.png" mode=""></image>
              </view>
            </picker>
            <input
              cursorSpacing="10"
              class="_main-item-val-input _input-text"
              type="number"
              maxlength="11"
              v-model="mobile"
              placeholder="请输入手机号码"
            />
          </view>

          <view class="_content-item _content-item-last">
            <!-- <view class="_main-item-val-input"></view> -->
            <view class="_content-item-last-item">
              <view class="_content-item-last-item-label"><text>验证码</text></view>
              <input
                cursorSpacing="10"
                class="_main-item-val-input _input-text"
                maxlength="6"
                type="number"
                v-model="code"
                placeholder="请输入验证码"
                style="width: 40%"
              />
            </view>
            <view
              class="_content-item-last-getCode"
              @tap="GetSms()"
              :class="{ disabled: opt.isSend || processing }"
              ><text>{{ opt.codeText }}</text></view
            >
          </view>
          <view class="title-msg"> 未注册的手机号码验证后自动创建群团账户 </view>
        </view>

        <view class="_main-content-chunk" v-if="loginType == 2">
          <view class="_content-item">
            <view class="_main-item-icon"
              ><image class="_img" src="../../static/img/account-icon.png" mode=""></image
            ></view>
            <input
              cursorSpacing="10"
              class="_main-item-val-input _input-text"
              type="number"
              v-model="account"
              placeholder="请输入帐号"
            />
          </view>
          <view class="_content-item">
            <view class="_main-item-icon"
              ><image class="_img" src="../../static/img/pwd-icon.png" mode=""></image
            ></view>
            <u-input  cursorSpacing="10"
                      class="_main-item-val-input _input-text"
                      type="password"
                      v-model="pwdNum"
                      placeholder="请输入密码" />
          </view>
        </view>

        <view class="login-start" @tap="btnLogin()" :class="{ disabled: disabledLogin }"
          ><text>普通用户登录</text></view>
        <view class="login-start login-end" @tap="btnLegalPerson()" :class="{ disabled: disabledLogin }"
        ><text>法人登录</text></view>
        <view class="login-other" style="display: none">
          <view class="_other-text">其他登录方式</view>
          <view class="_other-box">
            <view class="_other-type"
              ><image class="_img" src="../../static/img/login_ico1.png" mode=""></image
            ></view>
            <view class="_other-type"
              ><image class="_img" src="../../static/img/login_ico2.png" mode=""></image
            ></view>
            <view class="_other-type"
              ><image class="_img" src="../../static/img/login_ico3.png" mode=""></image
            ></view>
          </view>
        </view>
      </view>

      <tabs-box></tabs-box>
    </view>
    <!-- </view> -->
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  import { getSms, phoneLogin, Registered, login } from '@/common/request.js'
  import {comlogin,phonecomLogin} from '@/api/login'
  import { send600 } from '@/common/util'
  export default {
    data() {
      return {
        code: '',
        mobile: '',
        mobileReg: /^1[3456789]\d{9}$/,
        disabled: true,
        processing: false,
        disabledLogin: true,
        screenHeight: '', //视口高度
        loginType: 1,
        isIndex: 0,
        zyCode: '',
        isArr: ['+86'],
        telNum: '',
        account: '',
        pwdNum: '',
        opt: {
          count: 60,
          timer: null,
          codeText: '获取验证码',
          isSend: false,
        },
      }
    },
    watch: {
      mobile(newText, oldText) {
        if (this.mobileReg.test(newText)) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      code(newText, oldText) {
        if (!this.disabled && !!newText) {
          this.disabledLogin = false
        } else {
          this.disabledLogin = true
        }
      },
      account(newText, oldText) {
        if (newText && this.pwdNum && this.loginType == 2) {
          this.disabledLogin = false
        } else {
          this.disabledLogin = true
        }
      },
      pwdNum(newText, oldText) {
        if (newText && this.pwdNum && this.loginType == 2) {
          this.disabledLogin = false
        } else {
          this.disabledLogin = true
        }
      },
    },
    onLoad() {
      this.screenHeight = uni.getSystemInfoSync().windowHeight // 把页面高度定成视口高度
    },
    computed: {
      ...mapState(['hasLogin', 'userInfo', 'token']),
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {
      ...mapMutations(['saveUserInfo','setUserToken']),
      //法人登录
      btnLegalPerson(){
        if(this.loginType===1){
          this.phonecomLogin()
        }else if(this.loginType===2){
          this.comlogin()
        }
      },
      //法人登录接口
      comlogin(){
        if (!this.account) {
          return this.$api.msg('用户名不能为空')
        }
        if (!this.pwdNum) {
          return this.$api.msg('密码不能为空')
        }
        comlogin({
          username: this.account,
          password: this.pwdNum,
        }).then(
            (res) => {
              if (res.success) {
                this.saveSetStorageSync(res)
              } else {
                this.$api.msg(res.message)
              }
            },
            (err) => {
              return this.$api.msg ( '登录失败' )
            })
      },
      //手机号法人登录接口
      phonecomLogin(){
        if (this.disabled || this.disabledLogin) {
          return
        }
        if (this.code.length < 4) {
          this.$api.msg('请输入大于4位验证码')
          return
        }
        // this.disabledLogin = true
        const data ={
          "captcha": this.code,
          "mobile": this.mobile,
          "smsmode": "2"
        }
        phonecomLogin(data).then(
            (res) => {
              if (res.code===200) {
                this.saveSetStorageSync(res)
              } else {
                this.$api.msg(res.message)
              }
            },
            (err) => {
              return this.$api.msg('登录失败')
            }
        )
      },
      //普通用户登录
      btnLogin() {
        if (this.loginType == 1) {
          this.mobileLogin()
        } else if (this.loginType == 2) {
          this.userLogin()
        }
      },
      mobileLogin() {
        const that = this
        if (this.disabled || this.disabledLogin) {
          return
        }
        if (this.code.length < 4) {
          this.$api.msg('请输入大于4位验证码')
          return
        }
        this.disabledLogin = true
        const userFrom = uni.getStorageSync('tag') || '1'
        //注册
        Registered({
          userPhone: this.mobile,
          userPwd: this.code + '00',
          captcha: this.code,
          userFrom: userFrom,
        }).then(
          (res) => {
            setTimeout(() => {
              this.disabledLogin = false
            }, 1000)
            if (!res.success) {
              if (res.message == '验证码错误') this.$api.msg('验证码错误')
              else this.loginSuccess(res)
            } else this.loginSuccess(res)
          },
          (err) => {
            that.disabledLogin = false
            this.$api.msg('登录失败')
          }
        )
      },
      userLogin() {
        if (!this.account) {
          return this.$api.msg('用户名不能为空')
        }
        if (!this.pwdNum) {
          return this.$api.msg('密码不能为空')
        }
        login({
          username: this.account,
          password: this.pwdNum,
        }).then(
          (res) => {
            console.log('res--userLogin', res)
            if (res.success) {
              this.saveSetStorageSync(res)
            } else {
              this.$api.msg(res.message)
            }
          },
          (err) => {
            return this.$api.msg('登录失败')
          }
        )
      },
      saveSetStorageSync(res) {
        this.$api.msg('登录成功', 2000, false, 'success')
        //写入缓存
        uni.setStorageSync('token', res.result.token)
        this.saveUserInfo(res.result.userInfo, res.result.token)
        this.setUserToken(res.result.token)
        const urlPath = uni.getStorageSync('url-path')
        if (!urlPath || urlPath == '/pages/login/login') {
          setTimeout(() => {
            uni.navigateTo({
              url: '../index/index',
              success: () => {
                //成功后删除
                uni.removeStorageSync('url-path')
              },
            })
          }, 800)
          return
        } else {
          setTimeout(() => {
            uni.redirectTo({
              url: urlPath,
              success: () => {
                //成功后删除
                uni.removeStorageSync('url-path')
              },
            })
          }, 800)
        }
      },
      loginSuccess(res) {
        //登录，手机号+验证码
        phoneLogin({
          mobile: this.mobile,
          captcha: this.code,
          smsmode: 1,
        }).then((res) => {
          console.log(res)
          if (!res.success) {
            this.$api.msg(res.message)
          } else {
            this.saveSetStorageSync(res)
          }
        })
      },
      GetSms() {
        if (this.disabled) {
          return
        }
        var param = { mobile: this.mobile, smsmode: 2 }
        getSms(param).then((res) => {
          if (res.success) {
            this.$api.msg('验证码发送成功')
            this.processing = false
            send600(this.opt)
          } else this.$api.msg(res.message)
        })
      },
      handleLoginType(type) {
        this.loginType = type
      },
      handleMenu(router) {
        console.log(router)
        if (!router) return false
        uni.navigateTo({
          url: router,
        })
      },
    },
  }
</script>

<style lang="scss">
  .login-page {
    width: 100%;
    // min-height: 100vh;
    position: relative;
    padding-top: 1rpx;
    box-sizing: border-box;
    // background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dae659813aed0000002129a96953.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620026186&t=d463851e06cce904ded57b388f501202');
    .login-img {
      width: 100%;
    }
    .login-pages-box {
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 1;
    }
    .login-page-top {
      width: 100%;
      height: 60vh;
    }
    .title-msg {
      padding-top: 10rpx;
      text-align: center;
      color: #ff6700;
      font-size: 24rpx;
    }
    .login-page-main {
      width: 100%;
      height: 550rpx;
      // margin-top: 60vh;
      background-color: #ffffff;
      padding: 0 30rpx;
      box-sizing: border-box;
      ._main-tab-box {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
        background-color: #fff;

        ._main-tab-btn {
          padding: 20rpx 20rpx;
          box-sizing: border-box;
          font-size: 26rpx;
          color: #888;
          ._btn-text {
            border-bottom: 6rpx solid rgba(255, 255, 255, 0);
          }
        }
        ._main-tab-btn-active {
          color: rgba(255, 103, 0, 1);
          font-weight: 600;
          ._btn-text {
            border-bottom: 6rpx solid rgba(255, 103, 0, 1);
            padding-bottom: 14rpx;
          }
        }
      }
      ._main-content {
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        padding-top: 40rpx;
        // background-color: #fff;
        ._content-item {
          width: 100%;
          height: 80rpx;
          background-color: rgba(242, 242, 242, 1);
          border-radius: 8rpx;
          margin-top: 10rpx;
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          line-height: 80rpx;
          ._main-item-val-input {
            text-align: left;
            display: flex;
            font-size: 26rpx;
            ._main-item-val-input-text {
              display: flex;
              flex-wrap: nowrap;
              align-items: center;
              margin-left: 20rpx;
              color: #000;
              font-weight: 600;
            }
            .drop-dowm-img {
              width: 30rpx;
              height: 30rpx;
              margin-left: 20rpx;
            }
          }
          ._input-text {
            box-sizing: border-box;
            margin-left: 20rpx;
          }
          ._main-item-icon {
            width: 40rpx;
            height: 40rpx;
            display: flex;
            margin-left: 20rpx;
            ._img {
              width: 100%;
              height: 100%;
            }
          }
        }
        ._content-item-last {
          background-color: #fff;
          justify-content: space-between;
          ._content-item-last-item {
            width: 70%;
            height: 80rpx;
            background-color: rgba(242, 242, 242, 1);
            border-radius: 8rpx;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
            ._content-item-last-item-label {
              font-size: 26rpx;
              color: #000;
              font-weight: 600;
              margin-left: 20rpx;
              width: 90rpx;
            }
            ._input-text {
              box-sizing: border-box;
              margin-left: 34rpx;
            }
          }
          ._content-item-last-getCode {
            width: 29%;
            height: 80rpx;
            background-color: rgba(241, 165, 87, 1);
            border-radius: 8rpx;
            font-size: 26rpx;
            color: #fff;
            text-align: center;
            &.disabled {
              background-color: #c0c4cc;
            }
          }
          ._content-item-last-getCode-disable {
            background-color: rgba(202, 202, 202, 1);
          }
        }
        .login-start {
          width: 100%;
          height: 80rpx;
          border-radius: 10rpx;
          background-image: linear-gradient(rgba(241, 165, 87, 1), rgba(241, 139, 65, 1));
          color: #fff;
          font-size: 32rpx;
          text-align: center;
          line-height: 80rpx;
          box-shadow: 0 0 2rpx 2rpx rgba(241, 165, 87, 1);
          margin-top: 60rpx;
          letter-spacing: 2rpx;
          &.login-end{
            margin-top: 30rpx;
          }
          &.disabled {
            background-color: #c0c4cc;
            background-image: linear-gradient(#c0c4cc, #c0c4cc);
            box-shadow: 0 0 2rpx 2rpx #c0c4cc;
          }
        }
        .login-link {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          color: rgba(241, 139, 65, 1);
          font-size: 30rpx;
          font-weight: 600;
          margin-top: 10rpx;
        }
        .login-other {
          width: 100%;
          border-top: 1px solid rgba(200, 199, 204, 0.5);
          position: relative;
          margin-top: 120rpx;
          margin-bottom: 50rpx;
          ._other-text {
            width: 220rpx;
            height: 40rpx;
            background-color: #fff;
            color: rgba(200, 199, 204, 0.9);
            font-size: 28rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            margin-top: -22rpx;
            text-align: center;
          }
          ._other-box {
            margin-top: 40rpx;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            ._other-type {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              margin: 0 30rpx;
              box-shadow: 0 0 15rpx #cccccc;
              ._img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
  }
</style>
